<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 <%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<%@include file="/WEB-INF/jsp/include/head.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>Form Elements - Ace Admin</title>

<meta name="description" content="Common form elements and layouts" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

<!-- bootstrap & fontawesome -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/bootstrap.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/font-awesome.min.css" />

<!-- page specific plugin styles -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/jquery-ui.custom.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/chosen.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/datepicker.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/bootstrap-timepicker.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/daterangepicker.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/bootstrap-datetimepicker.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/colorpicker.css" />

<!-- text fonts -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace-fonts.css" />

<!-- ace styles -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace.min.css"
	id="main-ace-style" />

<!--[if lte IE 9]>
			<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/ace-part2.min.css" />
		<![endif]-->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace-skins.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace-rtl.min.css" />

<!--[if lte IE 9]>
		  <link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/ace-ie.min.css" />
		<![endif]-->

<!-- inline styles related to this page -->

<!-- ace settings handler -->
<script
	src="<%=request.getContextPath()%>/ace/assets/js/ace-extra.min.js"></script>

<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

<!--[if lte IE 8]>
		<script src="<%=request.getContextPath()%>/ace/assets/js/html5shiv.min.js"></script>
		<script src="<%=request.getContextPath()%>/ace/assets/js/respond.min.js"></script>
		<![endif]-->
		<script type="text/javascript" src="${ctx }/js/ajaxfileupload.js"></script>
</head>

<body class="no-skin">
	<div class="breadcrumbs" id="breadcrumbs">

		<ul class="breadcrumb">
			<li><i class="ace-icon fa fa-home home-icon"></i> <a href="#">Home</a>
			</li>

			<li><a href="#">Tables</a></li>
			<li class="active">Simple &amp; Dynamic</li>
		</ul>
		<!-- /.breadcrumb -->

	</div>

	<!-- /section:basics/content.breadcrumbs -->
	<div class="page-content">
		<!-- /section:settings.box -->
		<div class="page-content-area">
			<div class="page-header">
				<h1>Form Elements</h1>
			</div>
			<!-- /.page-header -->

			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<form id="drizzt-table" class="form-horizontal"
						action="<%=request.getContextPath()%>/drama/add.do"
						method="post">
						<!-- #section:elements.form -->
						 
  						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 专辑名称 </label>

							<div class="col-sm-9">
								<input type="text" id="form-field-1"
									placeholder="name"
									name="name"
									class="col-xs-10 col-sm-5" />
							</div>
						</div>
						  						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 专辑封面图 </label>

							<div class="col-sm-9">
									<img id="imageCover" alt="" width="300px" height="300px">
									<input type="file" id="file"  onchange="ajaxFileUpload()" name="file" />
									<input type="hidden" name="cover" id="cover">
							</div>
						</div>
						  					<!-- 	<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 是否显示 </label>

							<div class="col-sm-9">
									<input type="radio" name="delFlag" value="0" checked="checked">显示
									<input type="radio" name="delFlag" value="1">隐藏
							</div>
						</div> -->
						  	<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 标签 </label>

							<div class="col-sm-9">
								<c:forEach items="${categoryList }" var="category">
										<input type="hidden" id="${ category.uuid}hidden" name="categoryId">
									<select style="width:100px;" id="${ category.uuid}" onchange="javascript:getSelect(this.id,this.value)">
										<option>${category.name }</option>
									</select>
								</c:forEach>
							</div>
						</div>
						  	<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 价格 </label>

							<div class="col-sm-9">
								<input type="number" id="form-field-1"
									placeholder="价格" min="0"
									name="price"
									class="col-xs-10 col-sm-5" />
							</div>
						</div>
						  	<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 老师 </label>

							<div class="col-sm-9">
									<select name="teacherId">
										<option value="">--请选择--</option>
										<c:forEach items="${teachers }" var="teacher">
											<option value="${teacher.id }">${teacher.name }</option>
										</c:forEach>
									</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 课程介绍 </label>

							<div class="col-sm-9">
									<textarea rows="" cols="" name="courseIntroduce"></textarea>
							</div>
						</div>
						 
						<div class="clearfix form-actions">
							<div class="col-md-offset-3 col-md-9">
								<input  class="btn btn-info" type="button" onclick="javascript:subDrama();" value="提交" />

								&nbsp; &nbsp; &nbsp;
								<input type="button" class="btn btn-info" onclick="location.href='<%=request.getContextPath()%>/drama/list.do'" value="返回" />
							</div>
						</div>
					</form>

					<!-- PAGE CONTENT ENDS -->
				</div>
				<!-- /.col -->
			</div>
			<!-- /.row -->
		</div>
		<!-- /.page-content-area -->
	</div>
	<!-- /.page-content -->
</body>

<!-- basic scripts -->

<!--[if !IE]> -->
<script type="text/javascript">
	window.jQuery
			|| document
					.write("<script src='<%=request.getContextPath()%>/ace/assets/js/jquery.min.js'>"
							+ "<"+"/script>");
</script>
<script type="text/javascript">
var arr = [];
$.ajax({
	type: "get",
    url: "${ctx}/drama/getCategoryList",     //ajax请求地址
    dataType: "json",
    data:{id:0},
    success: function (data) {
    	
	 if(data.length>1){
         for(var i=0;i<data.length;i++){
        	 getCategoryList(data[i].uuid, data[i].name);
         }
     }
    },
    error :function(data){
    }
 });
function getCategoryList(id, name){
	$.ajax({
		type: "get",
	    url: "${ctx}/drama/getCategoryList",     //ajax请求地址
	    dataType: "json",
	    data:{id:id},
	    success: function (data) {
		 if(data.length>1){
			 var child = "<option value=''>"+name+"</option>";
			 for(var i = 0;i<data.length;i++){
				 child += "<option value="+data[i].uuid+">"+data[i].name+"</option>";
			 }
			 $("#"+id).html(child);
	     }  
	    },
	    error :function(data){
	    }
	 });
}
function getSelect(id,val){
	if(val != ''){
		$("#"+id+"hidden").val(val);
	}
}
function ajaxFileUpload(){
	$.ajaxFileUpload({
		url:'<%=request.getContextPath()%>/uploadimage/cover', //上传的地址
		fileElementId:'file',//上传文件的id
		dataType: {},
		success: function (data){
			$("#cover").val(data);
			$("#imageCover").attr("src","${ctx}/getPic/cover/"+data);
		}
	})
}
function subDrama(){
	var name = $("input[name='name']").val();
	var label = $("input[name='categoryId']").val();
	var cover = $("#cover").val();
	if(name==""){
		alert("专辑名称为空");
		return false;
	}
	if(cover==""){
		alert("未选择专辑封面图");
		return false;
	}
	if(label==""){
		alert("未选择标签");
		return false;
	}
	$("#drizzt-table").submit();
	
}
</script>

<!-- <![endif]-->

<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='<%=request.getContextPath()%>/ace/assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script type="text/javascript">
	if ('ontouchstart' in document.documentElement)
		document.write("<script src='<%=request.getContextPath()%>/ace/assets/js/jquery.mobile.custom.min.js'>" + "<"+"/script>");
</script>

<script
	src="<%=request.getContextPath()%>/ace/assets/js/bootstrap.min.js"></script>

<!-- the following scripts are used in demo only for onpage help and you don't need them -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace.onpage-help.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/docs/assets/js/themes/sunburst.css" />

</html>
